<template>
    <div class="bgc">
        <div class="head">
            <div class="one">
                <img src="https://img1.baidu.com/it/u=1628584029,1412475946&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                    alt="">
                <div class="msg">
                    <p class="nc">昵称</p>
                    <p class="id">ID: 12121212</p>
                    <p class="jj">我的个人简介: dfsdshfjdjjsfhjdsfs</p>
                </div>
                <img class="right" src="@/assets/mine/right.png" alt="">
            </div>
            <div class="two">
                <div class="li">
                    <img src="@/assets/mine/a.png" alt="">
                    <span class="id">36 喜欢</span>
                </div>
                <div class="li">
                    <img src="@/assets/mine/d.png" alt="">
                    <span class="id">12 收藏</span>
                </div>
                <div class="li">
                    <img src="@/assets/mine/c.png" alt="">
                    <span class="id">5 粉丝</span>
                </div>
                <div class="li">
                    <img src="@/assets/mine/b.png" alt="">
                    <span class="id">1250 获赞</span>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="box">
                <div class="heads">
                    <img src="@/assets/mine/e.png" alt="">
                    <span class="title">商品与订单</span>
                </div>
                <ul>
                    <li>
                        <img src="@/assets/mine/f.png" alt="">
                        <span class="title">足迹</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/g.png" alt="">
                        <span class="title">收藏</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/h.png" alt="" @click="go">
                        <span class="title">订单</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/i.png" alt="">
                        <span class="title">售后</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/j.png" alt="">
                        <span class="title">评论</span>
                    </li>

                </ul>
            </div>
            <div class="box">
                <div class="heads">
                    <img src="@/assets/mine/k.png" alt="">
                    <span class="title">活动福利</span>
                </div>
                <ul>
                    <li>
                        <img src="@/assets/mine/l.png" alt="">
                        <span class="title">优惠券</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/m.png" alt="">
                        <span class="title">盲盒</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/n.png" alt="">
                        <span class="title">转盘抽奖</span>
                    </li>
                </ul>
            </div>
            <div class="box">
                <div class="heads">
                    <img src="@/assets/mine/o.png" alt="">
                    <span class="title">更多</span>
                </div>
                <ul class="ul">
                    <li>
                        <img src="@/assets/mine/p.png" alt="">
                        <span class="title">设置</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/q.png" alt="">
                        <span class="title">常见问题</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/r.png" alt="">
                        <span class="title">客服</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/s.png" alt="">
                        <span class="title">留言反馈</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/t.png" alt="">
                        <span class="title">用户协议</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/u.png" alt="">
                        <span class="title">清理</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/v.png" alt="">
                        <span class="title">切换账号</span>
                    </li>
                    <li>
                        <img src="@/assets/mine/w.png" alt="">
                        <span class="title">退出登录</span>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const go = () => {
    router.push('/nav/mine/order')
}
</script>

<style lang='less' scoped>
.bgc {
    width: 390px;

    .head {
        width: 390px;
        height: 194px;
        background-color: #FDF2F2;
        overflow: hidden;
        border-bottom-right-radius: 25px;
        border-bottom-left-radius: 25px;

        .one {
            width: 390px;
            height: 120px;
            display: flex;
            padding: 0 20px;
            align-items: center;

            .right {
                width: 55px;
                height: 55px;
                margin-left: 20px;
            }

            img {
                width: 70px;
                height: 70px;
                border-radius: 50px;
            }

            .msg {
                width: 180px;
                height: 70px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-left: 30px;
            }

            .nc {
                font-size: 15px;
            }

            .jj {
                font-size: 12px;
                color: rgba(115, 115, 115, 1);
            }

            .id {
                font-size: 12px;
                color: rgba(115, 115, 115, 1);
            }
        }

        .two {
            margin-top: 10px;
            height: 150px;
            display: flex;
            justify-content: space-around;

            .li {
                display: flex;
                width: 100px;
                flex-direction: column;
                align-items: center;

                img {
                    width: 30px;
                    height: 30px;
                }

                .id {
                    color: rgba(115, 115, 115, 1);
                    font-size: 12px;
                }
            }
        }
    }

    .main {
        padding-top: 10px;

        .box {
            padding: 10px;

            .ul {

                li {
                    margin: 8px 12px;

                }
            }

            .heads {
                display: flex;
                align-items: center;

                span {
                    color: rgb(16, 16, 16);
                    font-size: 16px;
                    margin-left: 5px;
                }
            }

            ul {
                margin: 15px 0;
                list-style: none;
                display: flex;
                justify-content: left;
                flex-wrap: wrap;

                li {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin: 0 16.5px;

                    span {
                        color: rgb(16, 16, 16);
                        font-size: 14px;
                    }
                }
            }
        }

    }

}
</style>